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> Understand design principles 

> Examine Web-specific design issues 
> Explore cross-platform issues 

> Integrate fonts and color 

> Incorporate images effectively 

> Locate Web design resources 

> Design an accessible Web page 

> Explore Web writing guidelines 

> Study usability factors 


Understanding how to create a well-designed Web page is the key to attract- 
ing users and making a functional Web site. It is not a requirement that Web 
designers be graphic design professionals, but creating effective Web pages 
requires some understanding of universal design guidelines and the unique 
design advantages and challenges that the Web poses. gf» Jaime Chavez 
works in the Information Systems department at Nomad Ltd, a travel and 
sporting goods company. He has worked with the IS team to create a com- 
pany Web site. They consult with the company’s graphic design department, 
as well as Web page-specific design resources on the Web, to critique their 
original design and to get tips on increasing the site’s usability. 


G Understanding 


aM | Design Principles 


When planning a graphic design, what you leave out is often just as important as what you include. 
While you can use graphics as well as font face and color variations to make a layout more interest- 
ing than a page of plain text, moderation is essential. Using too many layout elements makes the 
page overwhelming and leaves users unclear about its point. Finding a judicious balance between 
plainness and overuse of formatting elements is key to the effectiveness of any Web page design. 
Cee Jaime’s colleagues from the graphic design department share their basic design guidelines. 
Figure G-1 shows an effective layout that incorporates the following tips: 


Use active white space 

The term white space refers to any empty part of a page. While you want to avoid leaving large 
areas of unused space that don’t serve a purpose for your design—known as passive white 
space—it also is important not to entirely eliminate white space. An empty zone deliberately 
placed between page elements—known as active white space—reinforces their separateness, 
and helps the user mentally group the page into sections. 


g*) Choose complementary colors and fonts, and limit their number 

You can control color in several types of Web page elements: page background, table back- 
ground, text, and graphics. Colored text can highlight main ideas or important points, or make 
text easier to read. As with white space, you also can use different colors and fonts to indicate 
separate ideas or sections in your layout. It’s best to limit colors and fonts to two or three per 
page, and to be sure that those you select complement each other. In order for differences in col- 
ors and fonts to have maximal impact, you should use them sparingly so that each occurrence 
isn’t cancelled out by others surrounding it. 


AS) Ensure content legibility 

Regardless of the design you choose, it’s important that users can read a page’s contents. 
Legibility is a factor in the selection of each page component—choose font sizes that aren't illeg- 
ibly small; avoid colors that are difficult to focus on (such as fuschia); and use images that aren’t 
too bright or too dark. Legibility also is a factor in combining page elements. When you deviate 
from the default black text on a white page, it’s important to select font and background colors 
that produce legible text. If you choose to use an image as the page background, you need to 
ensure that the image provides an appropriate contrast for all page contents. 


A Use a style that fits the message 
In addition to testing the design merits of each page element, you need to ensure that all com- 
ponents of your layout reinforce the page’s message. For example, the appropriate font face, 
page colors, and graphics for a business presentation would be quite different from those 
describing a Mardi Gras festival. 


FIGURE G-1: Web page implementing basic design elements o] 
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Examining Web- 
HM | Specific Design Issues 


In addition to design guidelines that apply to traditional media, Web page designers need to con- 
sider issues that are particular to the Web medium. Although Web pages can resemble traditional 
media, there are two significant differences. Unlike a magazine page, for example, a Web browser 
window is wider than it is tall. This requires a different layout. Additionally, Web users interact 
with Web pages, rather than just look at them; as a result, Web pages require additional planning. 
Whatever constraints it imposes on design, however, the Web’s flexibility also offers designers sig- 
nificant advantages. @fæ» In their research on the subject, members of the Nomad Web- 
design team find three main features of Web design that have unique advantages and 
requirements. Figure G-2 shows a Web page with contents that are not optimized for the Web. 
However, the Web page in Figure G-3 conforms to many aspects of the three features, which are: 


QuickTip Web users 


The smallest display Studies have found that Web users generally know what they’re looking for, and have little 
resolution is 640 x patience for sites that don’t immediately look useful. While this finding suggests that users sub- 
480; however, the ject your Web site to a snap judgment, you can use this information to design your site so that it 


vast majority of Web 
users view pages at a 
resolution of 800 x 
600 or greater. If your 


makes the cut. While keeping the page uncluttered, make the site’s contents obvious and 
easily accessible from every page; one or two well-planned navigation bars efficiently 
accomplishes this. You should limit the length of a Web site’s home page to what fits in most 


Web page contents browser windows (800 x 600 pixels), so that users can locate the information they want without 
can comfortably fit in scrolling. Most readers are used to reading text in newspaper or magazine layouts. For this rea- 
this smaller size, or if son, it also is important to limit paragraph length, as users generally scan, rather than read 
your audience is likely entire Web pages. 


to be using older 

computer equipment, Web browsers 

test your pages at Although some of the principles are similar, a Web browser presents a layout medium that is 

640 x 480 to ensure quite different from traditional print media. Unlike magazines and newspapers, a Web page 

usability. appears wider than it is tall. Therefore, your layout should use the width of the page, rather 
than its length. For text content such as news stories and editorials, however, print media legi- 
bility rules apply. Therefore, paragraphs of text should appear in narrow columns. Because 
the Web is a dynamic medium, each user’s browser affects the appearance of your layout, 
so it is vital to test your Web pages on different browser brands, browser versions, operating sys- 
tems, and screen resolutions. 


A Web medium 


The Web itself as a medium presents design advantages and challenges. Because users access 
Web pages over various types of Internet connections, its important to keep the size of your 
HTML and associated files as small as possible, to minimize user wait time. Also, Web 
pages are not static documents published once, like magazines and newspapers. Rather, Web 
pages always give readers the impression that they are always viewing new documents. You 
must schedule and budget regular updates to your Web site in order for it to maintain its 
level of integrity. Finally, because Web pages are dynamic, and interpretation varies across inter- 
faces, users with disabilities can access Web pages using specialized interfaces. To ensure such 
accessibility, you need to use HTML code that is as widely interpretable as possible—for 
example, use <EM>..</EM> instead of <I>..</I>. 


FIGURE G-2: Web page lacking Web design aspects 
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FIGURE G-3: Web page design optimized for the Web 
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HTML 


If it is likely that your 
Web page audience will 
be using older equip- 
ment, you may want to 
design pages compati- 
ble with the lowest 
possible resolution of 
640 x 480. However, 
few Web users use 
such monitors. 


én 


QuickTip 


Exploring Cross- 
Platform Issues 


Regardless of how carefully you design a Web page, certain computer setups can render the same 
HTML differently. Source interpretation varies among browser brand, browser version, and 
operating system. Additionally, a computer’s screen resolution can affect what each user sees on 
the screen, and how each element is aligned on the page. Therefore, it is important to test your 
Web pages using as many variations as possible of all of these factors—characteristics that are 
collectively known as a user’s platform. fæ» To give the Nomad Web development team a 
flavor of the differences among user platforms and screen resolutions, Jaime opens a page that 
was not designed for cross-platform compatibility in different browsers and screen resolutions. 
He also outlines the specific appearance issues across platforms and displays: 


Browser interpretation 

Although industry standards for each version of HTML are issued by an independent organiza- 
tion, the W3C (World Wide Web Consortium), in practice it’s rare for browsers to fully comply 
with these standards. As a result, each browser brand supports different subsets of each version 
of HTML, and may interpret the features differently, as shown in Figure G-4. As long as differ- 
ent browsers and operating systems are available among Web users, Web page design will con- 
tinue to require care, experimentation, and extensive testing in order for pages to appear 
similarly across platforms. Up-to-date information on the most widely used browsers—and the 
deficiencies of each—is important knowledge for Web design. 


Screen resolution 

You can safely bet that a Web page does not appear on your screen exactly as all other readers see 
it. The reason is that monitor resolution—the screen’s display dimensions (width by height, in 
pixels)—-varies, depending on a user’s monitor and computer hardware. Common resolutions 
include 800 x 600, 1024 x 768, and 1280 x 1024, with some platforms capable of displaying even 
larger areas. Figure G-5 shows the same Web page at these three resolutions. Notice that as the 
resolution increases, more of the page is visible in the browser window. Extremely large screen 
areas add blank space around the layout. Designers usually create Web pages that consistently 
appear at different resolutions by using a centered layout table no wider than the lowest com- 
mon resolution—800 pixels. 


Image display 

Almost all Web users use one of two main types of computers: the Apple Macintosh, or the 
IBM-compatible PC. The two are virtually indistinguishable to Web page designers, except in 
one area: images. Among the many properties of a digitized image file are gamma settings, 
which specify the degree of contrast between midlevel gray values. The Mac and the PC have 
different standard gamma settings for their displays; this can cause the same image to appear 
noticeably different on the two platforms. An image with heavy contrast on a Macintosh may 
look very dark on a PC, whereas high-contrast Windows images may look flat and washed out 
on a Macintosh. Web designers generally split the difference, using images with a setting mid- 
range between the Mac and PC. 
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FIGURE G-4 : Web page as it appears in three different browser versions 
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FIGURE G-5: Web page as it appears at three different screen resolutions 
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(G) | Integrating Fonts and 
a | Color 


Formatting text with different font faces and colors is one of the simplest design aspects to 
implement. For this reason it’s especially important to be cautious and thoughtful when adding 
these features to a Web page. You should limit each page’s text to two or three fonts and two or 
three colors. Additionally, most of the text should use one standard font and color—others 
should be used for small, specific applications that help users identify related page elements. 
Ql The Web design team recently added three new categories to the Nomad Ltd Web site 
plan. Jaime adds them to the navigation bar in the development template and uses a special font 
and color to draw attention to them. 


1. Start your text editor, open the file HTM G-1.htm, then save it as a text document with 


the filename nomad-g.htm 
This Web document is the template for adding Web pages to the Nomad Web site. 


2. Scroll down to the unordered list beginning with the item “Hiking/Camping”, click at 
the end of the line containing the list item Clothing, then press [Enter] 


3. Press [Spacebar] eight times, then type <LI><A HREF="construction.htm"> 
Fitness</A> 


4. Click at the end of the line containing the list item Skiing, press [Enter], press 
[Spacebar] eight times, then type <LI><A HREF="construction.htm"> 


Guidebooks</A> 
Jaime added new list items for the Fitness and Guidebooks categories. 
QuickTip 5. Click at the end of the line containing the list item Fitness, then type &nbsp;&nbsp; 
The code &nbsp; adds a <FONT COLOR="#008080"><EM>NEW</EM></FONT> 
space; HTML inserts only one Jaime adds two spaces after the linked text, then inserts the word NEW in an emphasized 


space between letters or 
page elements unless you 


use this code to specify 6. Repeat Step 5 for the line containing the Guidebooks list item, then save your work 
extraispaces, Your Web page code should resemble the document shown in Figure G-6. 


(italic) font and blue-green font color. 


7. Start your Web browser, cancel any dial-up operations, then open the file nomad-g.htm 
As shown in Figure G-7, the two new choices appear in the navigation bar, along with the 
colored and italicized text NEW. This text highlights the new options for users who may 
already be familiar with the site. 


FIGURE G-6: Web page code selectively implements text color 
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FIGURE G-7: Web page template incorporating text color 
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(G) | Incorporating Images 
m | Effectively 


Just as effective Web designs benefit from limited use of text color and font variation, you can 
strengthen your Web pages by keeping the use of graphics thoughtful and sparing. Graphics 
draw readers’ attention and contribute to a page’ mood—strong benefits of including graphics 
in a layout. However, using too many graphics on a page, especially unrelated ones, overwhelms 
users and prevents them from focusing on the most important part of the page. Also, because 
many Web users rely on relatively slow Internet connections via modems, minimizing the num- 
ber of graphics in a Web page is vital to ensure relatively quick downloads. fæ» The Nomad 
Web design team is considering making the product category list in the navigation bars context- 
specific, so that the list only contains options relevant to the contents of the page on which it 
appears. To set up a model of this idea for evaluation, Jaime creates a second horizontal naviga- 
tion bar that will appear at the top of the screen. This new bar contains options users will need, 
regardless of which page in the site they open. 


1. In your text editor, scroll down to the second column in the page’s structuring table, 
select the text <!-- HORIZONTAL TOOLBAR ICONS -->, then press [Delete] 


TCM 2.Press [Spacebar] ten times, then type <TD WIDTH="108" HEIGHT="55"> 
Although the closing </TD> <IMG SRC="images/homeic.gif" WIDTH="50" HEIGHT="50" ALT="Home"> 
tag is not officially required, </TD> 


it can be useful in prevent- 
ing browser errors when cre- 3. Press [Enter], press [Spacebar] ten times, then type <TD WIDTH="108"> 
een <IMG SRC="images/gearic.gif" WIDTH="50" HEIGHT="50" ALT="Gear"></TD> 


4, Repeat Step 3 three times to enter the remaining three lines of code shown in Figure G-8 
Figure G-8 shows the completed code that adds the icons to the horizontal toolbar. 


5. Save your work, open your browser, then reload the file nomad-g.htm 
As shown in Figure G-9, the horizontal toolbar appears along the top of the Web page. Each 
icon is small, minimizing the page’s download time. The icons are similar in shape and 
appearance, which suggests their relatedness without distracting users from other parts of 
the Web page. 


FIGURE G-8: Web page code implementing small, related graphics 
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<TD UVALIGN=“top” HEIGHT="275" WIDTH="550"><FONT FACE="arial, helvetica, 
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HEIGHT="50" ALT="Travel"></TD> 
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<TD WIDTH="108"><IMG SRC="“images/helpic.gif” WIDTH="50" HEIGHT="50" 
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<TR ALIGN="center"> 
<TD><FONT FACE=“arial, helvetica, sans serif” SIZE="-1"><A 
HREF="construction. htm" >Home< /A></TD> 
<TD><FONT FACE="“arial, helvetica, sans serif” SIZE="-1"><A 
HREF="construction.htm" >Gear< /A></TD> 
<TD><FONT FACE="“arial, helvetica, sans serif" SIZE="-1"><A 
HREF="construction. htm" >Travel</A></TD> 
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FIGURE G-9: Web page template selectively incorporates graphics 
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Locating Web Design 
am | Resources 


While youre familiar with the general design guidelines required by all Web pages, many other 
suggestions are useful or important depending on a page’s contents, audience, or goal. 
Additionally, as Web technologies and languages evolve, it’s important to stay current with the 
consensus on how to effectively use them. Fortunately, design guidelines are abundant on the 
Web itself. You can use a search engine to research relevant design pointers for your Web pages. 
Clee Jaime reviews a few main categories of design resources with the Nomad Web design 
team, and describes their uses. 


Web design articles 

The Web contains many sites that focus on HTML and related technologies and regularly add 
new articles and news. These sites, such as the one shown in Figure G-10, are a great way to keep 
current on design trends. They also provide advice from experienced designers, and can quickly 
bring you up to speed on industry conventions. 


A Style guides 


Many large organizations—such as corporations and universities—include their Web design 
guidelines on their Web sites. While these guides, such as the one shown in Figure G-11, gener- 
ally contain rules that members of the particular organization must follow when creating Web 
pages, they can shed light on the reasons some organizations use or avoid specific formatting or 
elements in their designs. By examining several such guides you also can get a sense of which 
style rules are in common use on the Web, and which are specific to an organization’s image or 
its internal practices. 


A Existing Web sites 
Another valuable source of design ideas is the sites you visit as a Web user. As you read the news, 
shop, research information, or check e-mail messages on the Web, pay attention to the design of 
each page that opens. When you find an interesting design, you can check the page code to see how 
it was created. You also should try to find other Web pages that use the same design; if you are 
unable to find any, there may be a good reason why other sites havent implemented the design. 


FIGURE G-10: Web design resource featuring regular articles 
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FIGURE G-11: Web style guide 
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Designing an 


Accessible Web Page 


Careful planning and implementation of your Web page design can benefit the page’s usability 
in several ways, such as producing a clearer and more focused visual layout. Additionally, close 
attention while designing your pages can help ensure that your pages are accessible for Web 
users with disabilities, including blindness, color blindness, and cognitive or learning disabili- 
ties. Although lists of specific areas to check are widely available on the Web, accessibility guide- 
lines stem from three main requirements: the appearance or perception of color should not be 
necessary for interpreting information; all page elements should make sense when vocalized by 
a machine, rather than viewed on a screen; and the content should be clear and logically orga- 
nized. Verifying that your pages meet these tests helps ensure their availability not only to people 
with disabilities, but also to Web users with older displays or browsers. fip» Jaime reviews 
the Nomad site template shown in Figure G-12 against a list of the main accessibility guidelines 
to make sure he hasn’t overlooked anything. He verifies that: 


Images and multimedia include alternate text 

Specifying alternate text using the ALT attribute for graphics and multimedia provides a key 
means of translating visual or aural information into a format that many devices can interpret. 
Alternate text can provide a description of a sound file, or explanatory text that is vocalized by a 
Web interface device for blind users. Jaime included a description of each icon in the template, 
using the ALT attribute. 


Color differentiation is not required for viewing any part of the page 

A popular visual design strategy applies color to selected layout elements to indicate a common 
meaning or similarity. For example, the text NEW in Jaime’s vertical navigation bar appears in 
green, to differentiate it from neighboring text. Because some readers are unable to perceive dif- 
ferences in color—or may be using a monochrome display—you should not rely on color dif- 
ferences as the only formatting distinction between different types of information. Because it 
also is italicized, Jaime’s NEW text remains distinguishable when viewed without color. 


Headers in data tables are correctly formatted 

When read aloud by a Web interface for the visually impaired, tables should still be able to con- 
vey the information expressed in their visual formats. It’s important to format cells in the 
header row with the <TH> tag—and equally important not to use this tag for other cells in the 
table, even if their contents should be formatted as boldface and centered. 


Table contents make sense if read row by row 
Some older browsers and other Web interfaces have difficulty organizing text that wraps to mul- 
tiple lines within a table cell. Ideally, cell contents in a data table should cover only a single line. 


Link text doesn’t rely on its context to indicate its function 

A widely discouraged element of Web page design, and which is slowly disappearing from the 
Web, is the use of the text “click here” to create a link. Instead, linked text should always describe 
the contents of the target page. This style guideline is especially important to visually impaired 
users who might scan a page using the [Tab] key to move from link to link. Each of the text links 
in both of Jaime’s navigation bars describes the contents of the Web page it opens. 


Page content is logically organized 

Ensuring that your pages contain simple, logical information makes them more accessible to 
people with cognitive disabilities, as well as to anyone who has difficulty reading. Use headings 
and ordered and unordered lists to clarify the relationships between page elements. 
Implementing site-wide navigation tools, such as navigation bars, explicitly denotes the rela- 
tionship between different Web pages. The two navigation bars that Jaime incorporated into the 
Nomad template provide a structural context for all pages in the site. 


FIGURE G-12: Nomad Web page template | 
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Exploring Web 
m | Writing Guidelines 


At first glance, writing text for a Web page seems like a snap: as long as you take the layout dif- 
ferences into consideration, text for the Web should be similar to any other visual medium, 
right? In reality, several unique aspects of the Web require a markedly different writing style and 
organization. Because text on a screen is more difficult to read than printed text, users are less 
comfortable and more impatient reading Web pages. Fortunately, just as there are style guide- 
lines available for printed media, many resources on the Web outline and explain effective writ- 
ing for an online audience. Qip» Jaime and the other members of the Nomad Web design 
team researched the topic of writing for the Web, and use the guidelines implemented on the 
Web page in Figure G-13. These guidelines include: 


Keep your writing concise 

Because a computer display is a less comfortable medium from which to read, compared to a 
printed page, it’s best to minimize the amount of reading required to convey information. 
People read more slowly from a screen than from paper. When comparing printed with online 
text, a rule of thumb is to reduce the number of words by 50% for the online audience. 


AS) Avoid long sections of text 
One result of the reduced comfort and speed of reading from a computer monitor is that Web 
users skim most of the text they encounter. As a result, your pages are more useful if they help 
users find information that’s relevant for them. Rather than forcing users to skim—or skip—a 
long section of text, break it up into several shorter sections, and add a meaningful heading to 
each. This allows users to quickly identify the main points of the page, and then give a closer 
reading to any section(s) that seem to match their interests. 


Á>) Divide text into page-size stand-alone units 
Even if you divide information into sections below descriptive headings, you must give atten- 
tion to the length of text on a single Web page. To allow users to scan and digest the contents of 
a page, limit the text length to nearly the length of the page. Instead of continuing a single arti- 
cle on additional Web pages, break it up into sections that can stand on their own, and place 
each on its own page. 


A Link text that describes its target 


In addition to accessibility factors for Web users with disabilities, ensuring that linked text is 
active is important in making Web text readable. Because linked text stands out from its sur- 
roundings on a page, users are more likely to notice it while scanning. Thus, this text should 
clearly state a specific point, and not be a useless phrase such as “click here.” Eliminating such 
writing is an excellent way to start reducing the amount of text on your pages, and to ensure that 
all your text is used as efficiently as possible. 


FIGURE G-13: Web page containing writing appropriate for the Web 
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In addition to creating Web pages that are laid out well and convey information, it’s important to 
make sure that your pages are easily usable. While you may come up with a new design idea that 
seems more user-friendly, you should always ensure that potential users agree with you before imple- 
menting it. Like other aspects of design, many resources are available on the Web that analyze aspects 
of Web page usability. Additionally, usability is a unique area of design because it can be studied and 
measured. Thus, reviewing some of the available data on what works and what doesn’t can be a 
rewarding investment of time, and can help you design more user-friendly Web sites. Qip» Jaime 
has studied some research, and shares his notes on important factors in Web site usability with the 
Nomad Web design team. Jaime’s guidelines, illustrated in the Web page in Figure G-14, include: 


Use a familiar layout 

Web design has begun to standardize on the most commonly used design elements. Jakob Nielsen, 
a Web design usability expert, points out that, “users spend most of their time on other sites.” Because 
Web users tend to value speed and efficiency, they usually prefer to use Web page elements—such as 
toolbars—laid out in a common format that they already understand. Thus, you should balance cre- 
ativity in your designs with the interface approach found on the most popular Web sites. 


>) Don’t rush to implement the latest technology 

Often, new developments in HTML or other Web technologies promise to simplify the 
designer’s or the user’s experience, or to allow previously impossible functionality in a Web site. 
However, implementing new technology can be tricky; if it generates errors for users when you 
first incorporate it into your site, you risk your reputation as a reliable, usable site—and users 
may not return. You should take the time to familiarize yourself with the technology and its 
potential drawbacks before using it, and give yourself time to test your implementation before 
making it available to users. New technology usually comes with compatibility problems, for 
disabled users as well as for anyone using an older Web browser. Usually, the best response to a 
new technology is to wait until the Web design community has established its limits and its 
most appropriate uses. 


A Minimize download times 
Given most Web users emphasis on speed, impatience is common when waiting for a Web page 
to download. Large Web pages that contain many screens of text, large graphics, or other tech- 
nologies that require downloading can result in delays. At best, you annoy your audience; at 
worst, they give up on your page before it finishes loading, and go somewhere else. One of the 
keys to minimizing download time is to avoid animations and large graphics on your Web 
pages, and especially on a sites home page. 

g*) Keep information up to date 
In order to attract users to regularly return to your Web site, you need to give them reason to trust 
the site and its contents. A crucial element to building this trust, which is specific to the Web, is to 
regularly update the site’s contents and to include text that specifies the date of your last site 
update. For example, if you located a Web site containing information on a subject of interest, but 
then discovered that the site was last updated in 1997, you would probably assume that more 
recent information might be available, and that youd do best to continue your search elsewhere. 

g>) Test your design 
One of the best ways of maximizing the usability of your design is also one of the most obvious: 
test it. While a well-planned test with different types of people can help you exhaustively analyze 
your Web site, feedback from even a handful of people can identify major stumbling blocks or 
an aspect that could markedly improve from some fine-tuning. Remember, however, to test 
your pages with members of the target audience. Such users are usually not other designers, but 
rather are people who are less technically adept. Positive reviews from such testers are a good 
indication that your design is indeed easy to use. 
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FIGURE G-14: Web page designed for usability 
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Describe the accessibility value of each page element indicated in Figure G-15. 
FIGURE G-15 
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5. Reinforce page’s message by creating a common theme 

6. Ensure these are complementary, and limited in number 

7. Use this empty zone to deliberately separate page elements 

8. Ensure users can read your page elements by choosing appropriate 
colors, font sizes, and text/background combinations 


=? 


Help 


a. Active white space 
b. Colors and fonts 
c. Legibility 

d. Style 


Practice 


Select the best answer from the list of choices. 


9. Because of the unique dimensions of a computer monitor, paragraphs of Web page text should appear 


a. Across the entire width of the screen. c. Only at the bottom of a Web page. 
b. In narrow columns. d. In long paragraphs. 
10. You can make a Web site’s contents obvious and easily accessible from every page by implementing 
a. A navigation bar. c. Forms. 
b. White space. d. Frames. 
11. You should limit the length of a site’s home page to what fits in most users’ browser windows because 
a. Users can’t view content that doesn’t fit c. Page content must match the length of 
in a Single screen. the navigation bar. 
b. Audio interfaces for disabled users can’t d. You should provide users with a quick way of 
read long Web pages. finding what they’re looking for. 
12. Which one of the following guidelines helps keep the size of your HTML and associated files as small as possible? 
a. Limit the size and number of graphics. c. Ensure the text and background colors are compatible. 
b. Break up long sections of text into d. Add links to the text that describes the target 
shorter paragraphs. page’s content. 
13. You must schedule and budget regular updates to your Web site in order to 
a. Prevent pages from growing too long. c. Maintain users’ trust in the site’s information. 
b. Minimize the time users wait for pages d. Make the site accessible for disabled users. 
to download. 
14. In order to give users with disabilities access to your Web pages, you should 
a. Limit use of linked text. c. Remove graphics from your pages. 
b. Avoid formatting page elements with color. d. Use HTML code that is as widely interpretable 
as possible. 
15. What is the width of the lowest common screen resolution? 
a. 640 pixels c. 1024 pixels 
b. 800 pixels d. 1280 pixels 
16. The Apple Macintosh and the IBM-compatible PC are virtually indistinguishable to Web page designers, 
except in which area? 
a. Images c. Navigation bars 
b. Link format d. Text readability 
17. What is a prudent upper limit on the number of text colors and fonts on a Web page? 
a. One c. Two or three 
b. One or two d. Three or four 
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18. Which one of the following design strategies is acceptable in an accessible Web page? 


a. Distinguishing page elements from c. Including a navigation bar for navigation within 
each other based only on color. the Web site. 

b. Including text whose meaning is clear d. Positioning page elements haphazardly to create a 
only visually. frenzied style. 


19. Which one of the following features should text written for the Web include? 
a. Organization into screen-size pages c. Long sections of text 
b. The phrase “click here” for links d. Lengthy explanations 


20. A usable Web page design should reflect prevalent designs currently in use because 


a. New technologies rarely add new c. Testing a new design is rarely effective at identifying 
functionality to a Web page. its weak points. 

b. Users prefer Web page elements in a d. They don’t need to be reviewed for accessibility 
format that they already understand. compliance. 
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J. You are evaluating the text content of the Web site you created for your computer consulting business, Star Dot 
Star. On one page you notice several details that you want to correct. 
To complete this independent challenge: 


a. Start your Web browser program, open the file HTM G-2.htm, then consider guidelines for writing for the Web as 
you explore the page. 

b. Start your text editor, open the file HTM G-2.htm, then save it as a text document with the filename sds-g1.htm. 

c. Remove the text “click here” from the navigation bar, then apply the link format instead to the descriptive text 
for each item. 

d. Save your work, then save a copy of the page as a text document with the filename sds-g2.htm. 

e. Delete the introductory text for the first list, describing creating Web pages; also delete the contents of the first list. 

f. Change the page heading to “Creating Web sites,” then format this text as centered. 

g. In the introductory paragraph for the remaining list, format the text “creating Web pages” as a link to the Web 
page “sds-g1.htm.” 

h. Below the list, add the text “See also: Creating Web pages”; format the text “Creating Web pages” as a link to 
the Web page “sds-g1.htm.” 

i. Save your work, then open the text document sds-g1.htm. 

j. Change the page heading to “Creating Web pages,” then format this text as centered. 

k. Delete the introductory text for the second list, describing creating Web sites, along with the contents of 
the second list. 

. Below the list, add the text “See also: Creating Web sites”; format the text “Creating Web sites” as a link to the 
Web page “sds-g2.htm.” 

m.Save your work, open the file sds-g1.htm in your browser, then click the link at the bottom of the list to open the 
file sds-g2.htm. 


Practice 


P. You are making accessibility and usability adjustments to the Web site for Crystal Clear Opticals. 
To complete this independent challenge: 


a. Start your Web browser, then open the file HTM G-3.htm. 

b. Start your text editor, open the file HTM G-3.htm, then save it as a text document with the filename cco-g.htm. 

c. Add the appropriate alternate text to each of the page’s graphics. 

d. In the navigation bar, use the BGCOLOR attribute to add a light-colored background to the cell containing the 
linked text. 

e. In the page’s main frame, format the text “Eclectic line” at the bottom of the page with a format of your choice, 
other than text color. 

f. Save your work, then open the file cco-g.htm in your browser. 


%. Researchers have conducted many Web site usability studies in order to pinpoint the factors that positively or neg- 
atively affect usability. This information, as well as commentary on it, is widely available on the Web. To better under- 
stand the factors that affect a user’s interaction with your Web pages, research recent data about the topic of usability 
that has been published online. 

To complete this independent challenge: 


a. Connect to the Internet and open a Web site that discusses Web page usability, such as one of the following: 
www.useit.com 
www.usableweb.com 
world. std.com/~uieweb 
If you have trouble locating these sites, go to www.course.com, navigate to the page for this book, click the link 
for the Student Online Companion, click the link for this unit, then click one of the links listed there. 
b. Read the results of research that interests you on one or more sites, then print three results that you find significant. 
c. For each of the three results you printed, write a paragraph summarizing the finding and its implications, then write a 
second paragraph or create a sketch showing how you would implement the finding in a Web page design. 


ork 4. One of the best ways of learning to design effective Web pages is to critically evaluate other Web 
&y | , „ Pages with less-than-optimal designs. Like all other aspects of Web design, several popular Web sites 


hay focus on this topic. To complete this independent challenge: 


= 


» 


a. Connect to the Internet and open a Web site that spotlights or discusses poorly designed Web 
pages, such as one of the following: 
www.webpagesthatsuck.com 
www.usableweb.com 
www.spinfrenzy.com/muddies/ 

If you have trouble locating these sites, go to www.course.com, navigate to the page for this book, click the link 
for the Student Online Companion, click the link for this unit, then click one of the links listed there. 

b. View at least five Web sites. As you examine the pages, look for and write down at least three highlighted design 
errors that you've noticed elsewhere on the Web on other occasions. (Because such scrutiny often prompts a 
quick redesign of Web sites featured, you may be able to view only an image of the site’s previous design, rather 
than actually use the poorly designed site.) 

c. For one of the three design errors you noted, note the URL of another site that incorporates the error; print out 
the other site, then write a paragraph or note on the printout how you would correct the error. 
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As the Web site designer for Touchstone Booksellers, you are reviewing the site to ensure that it is accessible for dis- 
abled Web users. Edit the file HTM G-4.htm so it appears as shown in Figure G-16 to colorblind users and users with 
monochrome monitors. Save your work with the filename tsb-g.htm. 


FIGURE G-16 
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